<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>登陆页面</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			html,
			body {
				background-color: #3B559F
			}
			
			.mui-content {
				background-color: #3B559F;
			}
			
			.L-div {
				width: 20%;
				border-radius: 6px;
				margin-left: 40%;
				margin-top: 20%;
				background-color: #FFFFFF;
			}
			
			.L-img {
				width: 100%;
			}
			
			.input1-div {
				padding: 0 5%;
				margin-top: 20%;
			}
			
			.input2-div {
				padding: 0 5%;
			}
			
			.mui-input-row #phonnum {
				border: 0;
				font-size: 90%;
				background-color: #3B559F;
				border-bottom: 1px solid #95A6C3;
				padding-left: 5px;
				border-radius: 0;
				color: #FFFFFF;
				letter-spacing: 1px;
			}
			
			.mui-input-row #password {
				border: 0;
				font-size: 90%;
				background-color: #3B559F;
				border-bottom: 1px solid #95A6C3;
				padding-left: 5px;
				border-radius: 0;
				color: #FFFFFF;
				letter-spacing: 2px;
			}
			
			.login-btn {
				width: 90%;
				margin-left: 5%;
				border: 0;
				background-color: #4864A0;
				font-size: 90%;
				margin-top: 8px;
				color: #95A6C3;
			}
			
			.login-text {
				width: 90%;
				margin-left: 5%;
				margin-top: 8px;
				font-size: 80%;
			}
			
			.login-a1 {
				color: #FFFFFF;
			}
			
			.login-a2 {
				float: right;
				color: #FFFFFF;
			}
			
			.login-bottom-text {
				width: 100%;
				position: fixed;
				bottom: 8px;
				text-align: center;
				font-size: 90%;
			}
			
			input::-webkit-input-placeholder {
				/* WebKit browsers */
				color: #95A6C3;
				letter-spacing: 0px;
			}
		</style>
	</head>

	<body id="body">
		<div class="mui-content">
			<div class="L-div">
				<img src="images/L-2.png" class="L-img" />
			</div>
			<div class="input1-div">
				<div class="mui-input-row">
					<input id="phonnum" type="text" class="mui-input-clear" placeholder="帐号/手机号">
				</div>
			</div>
			<div class="input2-div">
				<div class="mui-input-row">
					<input id="password" type="password" class="mui-input-clear" placeholder="密码">
				</div>
			</div>

			<button type="button" class="mui-btn mui-btn-blue login-btn" id="loginbtn">登录</button>
			<div class="login-text">
				<a href="javascript:void(0)" class="login-a1">忘记密码</a>
				<a href="" id="sfdcq" class="login-a2">注册论语</a>
			</div>
			<div id="login-bottom-text" class="login-bottom-text">
				登录即代表阅读并同意
				<a style="color: #343843;">服务条款</a>
			</div>
		</div>

		<script src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/app.js" ></script>
		<script type="text/javascript" src="js/immersed.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init({
				preloadPages: [{
					url: 'html/register1.html',
					id: 'html/register1.html'
				}, {
					url: 'html/register2.html',
					id: 'html/register2.html'
				}, {
					url: 'html/register33.html',
					id: 'html/register33.html'
				}, {
					url: 'html/searchschool.html',
					id: 'html/searchschool.html'
				}]
			});

			var originalHeight = (document.documentElement.clientHeight || document.body.clientHeight) - immersed;
			window.onresize = function() {
				var textcont = document.getElementById('login-bottom-text');
				//键盘弹起与隐藏都会引起窗口的高度发生变化
				var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
				if(resizeHeight - 0 < originalHeight - 0) {
					textcont.style.display = 'none'
					//当软键盘弹起，在此处操作
				} else {
					textcont.style.display = 'block'
					//当软键盘收起，在此处操作
				}
			}

			mui.plusReady(function() {
				
				
				
				// 判断用户是否注册登录过，如果本地内存有全局的用户对象，此时直接跳转到首页
				var userInfo = app.getUserGlobalInfo();
				if (userInfo != null) {
					// 页面跳转
					mui.openWindow("html/shouye.html", "html/shouye.html");
				}

				document.getElementById('loginbtn').addEventListener('tap', function() {
					event.stopPropagation();
					var phonenum = document.getElementById('phonnum').value;
					var pasword = document.getElementById('password').value;
					
					
					
					document.getElementById('phonnum').style.borderBottom = "1px solid #95A6C3";
					document.getElementById('password').style.borderBottom = "1px solid #95A6C3";

					if(phonenum == "" || pasword == "") {
						mui.alert('输入内容不能为空！')
					} else {
						mui.ajax(app.serverUrl + '/userController/login', {
							data: {
								lyuser_Card: phonenum,
								lyuser_Password: pasword
							},
							crossDomain: true, //强制使用5+跨域
							dataType: 'json', //服务器返回json格式数据
							type: 'get', //HTTP请求类型
							timeout: 10000, //超时时间设置为10秒；
							//processData: false,
							headers: {
								'Content-Type': 'application/x-www-form-urlencoded'
							},
							success: function(data) {
								if(data.state == 0) {
									mui.alert("账号或密码不正确！")
								} else {
									// 登录或者注册成功之后，保存全局用户对象到本地缓存
									var userInfoJson = data.data;
									app.setUserGlobalInfo(userInfoJson);
									// 页面跳转
									mui.openWindow("html/shouye.html", "html/shouye.html");
								}
							}
						})
						plus.storage.setItem("card", phonenum);
					}
				})
			})

			mui.plusReady(function() {
				plus.navigator.setStatusBarStyle('light');
				document.getElementById('sfdcq').addEventListener('tap', function() {
					mui.openWindow({
						url: "html/register1.html",
						id: "html/register1.html",
						createNew: true
					})
				})
				getarea();
				
				document.getElementById('phonnum').addEventListener('tap',function(){
					event.stopPropagation();
					this.style.borderBottom = "2px solid #FFFFFF";
					document.getElementById('password').style.borderBottom = "1px solid #95A6C3";
				})
				
				document.getElementById('password').addEventListener('tap',function(){
					event.stopPropagation();
					this.style.borderBottom = "2px solid #FFFFFF";
					document.getElementById('phonnum').style.borderBottom = "1px solid #95A6C3";
				})
				
				document.getElementById('body').addEventListener('tap',function(){
					event.stopPropagation();
					document.getElementById('password').style.borderBottom = "1px solid #95A6C3";
					document.getElementById('phonnum').style.borderBottom = "1px solid #95A6C3";
				})

			})

			var getarea = function() {
				//获取位置（市）
				plus.geolocation.getCurrentPosition(geoInf, function(e) {

				}, {
					geocode: true,
					provider: 'amap'
				});

				//第二步通过geolnf 方法来获取具体的定位信息

				function geoInf(position) {

					var codns = position.coords; //获取地理坐标信息；

					var longt = codns.longitude; //获取到当前位置的经度

					var lat = codns.latitude; //获取到当前位置的纬度；

					//提醒：position.address 获取的是地址集合包括省市县街道等.如果获取不到就返回undefined

					//country国家，province省，city城市，district区（县）名称，street街道和门牌信息

					//poiNamePOI信息。如“电子//城．国际电子总部”
					var city = position.address.city;
					var newcity = ''
					for(var i = 0; i < city.length; i++) {
						if(city[i] == "市") {
							newcity += '';
						} else {
							newcity += city[i];
						}
					}
					plus.storage.setItem("zrea", newcity);
				}
			}
		</script>
	</body>

</html>